<template>
   <div class="haibei-service">
        <div class="haibei-warpper">
            <div class="service-header mt20 clearfix">
              <router-link :to="{name:'student'}" class="common-header" tag="div">
                <p class="mt25" ><img :src="$route.name==='students'?'/static/images/icon33.png':'/static/images/icon37.png'" alt=""></p>
                <p class="mt10">学员引导</p>
              </router-link>
              <router-link  :to="{name:'teachers'}" class="common-header" tag="div">
                <p class="mt25"><img :src="$route.name==='teachers'?'/static/images/icon34.png':'/static/images/icon38.png'" alt=""></p>
                <p class="mt10">讲师引导</p>
              </router-link>
              <router-link  :to="{name:'setup'}" class="common-header" tag="div">
                <p class="mt25"><img :src="$route.name==='setup'?'/static/images/icon35.png':'/static/images/icon39.png'" alt=""></p>
                <p class="mt10">安装指南</p>
              </router-link>
              <router-link  :to="{name:'question'}" class="common-header" tag="div">
                <p class="mt25"><img :src="$route.name==='question'?'/static/images/icon36.png':'/static/images/icon40.png'" alt=""></p>
                <p class="mt10">F&Q</p>
              </router-link>
            </div>
            <div class="service-main clearfix">
              <router-view></router-view>
            </div>
        </div>
      </div>
</template>

<script>
export default {
  name: "guide",
  mounted() {
    document.title = "海贝交易社区-新手指南";
  }
};
</script>

<style scoped>


.haibei-service {
    padding-top: 70px;
      background: #eff3f5;
      padding-bottom: 20px;
}

.haibei-service-content {
  background: #fff;
  height: 100vh;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.common-header {
  flex: 1;
  height: 116px;
  float: left;
  width: 24.9%;
  cursor: pointer;
  text-align: center;
  border: 1px solid #eeeff2;
  border-left: 0px;
}
.service-main {
  background: #fff;
  min-height: 800px;
}
</style>